<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹幕美化</title>
    <style type="text/css">
        .normal {
            width: 800px;
            height: 30px;
            background: #66ccff;
            border: 1px solid #333;
            border-radius: 10px;
            line-height: 30px;
            opacity: 0.5;
            position: absolute;
        }
        .gift {
            width: 800px;
            height: 30px;
            background: #ff4500;
            border: 1px solid #333;
            border-radius: 10px;
            line-height: 30px;
            opacity: 0.5;
            position: absolute;
        }
        .join {
            width: 370px;
            height: 30px;
            background: #adff2f;
            border: 1px solid #333;
            border-radius: 10px;
            line-height: 30px;
            opacity: 0.5;
            position: absolute;
        }
        .follow {
            width: 370px;
            height: 30px;
            background: #ff1493;
            border: 1px solid #333;
            border-radius: 10px;
            line-height: 30px;
            opacity: 0.5;
            position: absolute;
        }
        .share {
            width: 370px;
            height: 30px;
            background: #ff00ff;
            border: 1px solid #333;
            border-radius: 10px;
            line-height: 30px;
            opacity: 0.5;
            position: absolute;
        }
    </style>
</head>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script>
    let movingElem;
    let space;
    let max;
    let elemList;
    let file;

    function init(aFile) {
        movingElem = [];
        space = document.getElementById("space").innerText;
        max = 0;
        elemList = [];
        file = aFile;
    }

    function addMovingElem(elem) {
        movingElem.length += 1
        movingElem[movingElem.length - 1] = elem
    }
    function removeMovingElem(elem) {
        for (let i = 0; i < movingElem.length; i++) {
            // noinspection EqualityComparisonWithCoercionJS
            if (movingElem[i] == elem) {
                movingElem[i] = movingElem[movingElem.length - 1];
                movingElem.length = movingElem.length - 1;
                break;
            }
        }
    }
    function containsMovingElem(elem) {
        for (let i = 0; i < movingElem.length; i++) {
            if (movingElem[i] === elem) {
                return true;
            }
        }
        return false;
    }

    function addElemList(elem) {
        elemList.length += 1
        elemList[elemList.length - 1] = elem
    }
    function removeElemList(elem) {
        for (let i = 0; i < elemList.length; i++) {
            // noinspection EqualityComparisonWithCoercionJS
            if (elemList[i] == elem) {
                elemList[i] = elemList[elemList.length - 1];
                elemList.length = elemList.length - 1;
                break;
            }
        }
    }
    function containsElemList(elem) {
        for (let i = 0; i < elemList.length; i++) {
            if (elemList[i] === elem) {
                return true;
            }
        }
        return false;
    }
    function sortElemList() {
        for (let a = 0; a < elemList.length; a++) {
            for (let b = 0; b < elemList.length - 1; b++) {
                if (parseInt(elemList[b]) > parseInt(elemList[b + 1])) {
                    let c = elemList[b];
                    elemList[b] = elemList[b + 1];
                    elemList[b + 1] = c;
                }
            }
        }
    }

    function moveY(elem, step, repeat) {
        addMovingElem(elem);
        moveY0(elem, step, repeat, -1);
    }
    function moveY0(elem, step, repeat, times) {
        let nowTimes = times + 1;
        if (nowTimes < repeat) {
            document.getElementById(elem).style.top = document.getElementById(elem).offsetTop + step + "px"
            setTimeout("moveY0(" + elem + "," + step + "," + repeat + "," + nowTimes + ")", 1);
        } else {
            removeMovingElem(elem);
        }
    }
    function removeElem(elem) {
        if (document.getElementById(elem).style.opacity === "") document.getElementById(elem).style.opacity = "0.5";
        if (parseFloat(document.getElementById(elem).style.opacity) < 0.02) {
            document.getElementById("mainbody").removeChild(document.getElementById(elem));
            removeElemList(elem);
            sortElemList();
        } else {
            document.getElementById(elem).style.opacity = (parseFloat(document.getElementById(elem).style.opacity) - 0.01).toString();
            setTimeout("removeElem(" + elem + ")", 1);
        }
    }
    // type: 1=normal 2=gift 3=join
    function addNewElem(type, sender, content) {
        max++;
        let at = 680 - (elemList.length * 40);
        if (type === 1) {
            let elem = document.createElement("div");
            elem.className = "normal";
            elem.id = max.toString();
            elem.innerText = space + space + sender + " | " + content;
            elem.style.top = at + "px";
            document.getElementById("mainbody").appendChild(elem);
        } else if (type === 2) {
            let elem = document.createElement("div");
            elem.className = "gift";
            elem.id = max.toString();
            elem.innerText = space + space + sender + " | 赠送了礼物 " + content;
            elem.style.top = at + "px";
            document.getElementById("mainbody").appendChild(elem);
        } else if (type === 3) {
            let elem = document.createElement("div");
            elem.className = "join";
            elem.id = max.toString();
            elem.innerText = space + space + sender + " | 进入直播间";
            elem.style.top = at + "px";
            document.getElementById("mainbody").appendChild(elem);
        } else if (type === 4) {
            let elem = document.createElement("div");
            elem.className = "follow";
            elem.id = max.toString();
            elem.innerText = space + space + sender + " | 关注直播间";
            elem.style.top = at + "px";
        } else if (type === 5) {
            let elem = document.createElement("div");
            elem.className = "share";
            elem.id = max.toString();
            elem.innerText = space + space + sender + " | 分享直播间";
            elem.style.top = at + "px";
        }
        addElemList(max.toString());
        sortElemList()
        setTimeout("removeElem(" + max.toString() + ")", 5000);
    }

    function moveToLocation() {
        for (let i = 0; i < elemList.length; i++) {
            let shouldAt = 680 - (i * 40);
            let nowAt = document.getElementById(elemList[i]).offsetTop;
            if (shouldAt !== nowAt && !containsMovingElem(elemList[i])) {
                moveY(elemList[i], 1, shouldAt - nowAt);
            }
        }
    }

    function keepMove() {
        moveToLocation();
        setTimeout("keepMove()", 100);
    }

    function readFile() {
        $.get("http://127.0.0.1", function(data) {  
            let split = data.split("\n")
            for (let i = 0; i < split.length; i++) {
                let current = split[i];
                let index = current.indexOf(",");
                let mode = current.substr(0, index);

                current = current.substr(index + 1);
                if (mode == "3") {
                    addNewElem(3, current, "null");
                } else if (mode == "4") {
                    addNewElem(4, current, "null");
                } else if (mode == "5") {
                    addNewElem(5, current, "null");
                } else {
                    index = current.indexOf(",");
                    let sender = current.substr(0, index);

                    let content = current.substr(index + 1);
                    if (mode == "1") {
                        addNewElem(1, sender, content);
                        return;
                    }
                    if (mode == "2") {
                        addNewElem(2, sender, content);
                    }
                }
            }
        });
    }

    function keepRead() {
        readFile();
        setTimeout("keepRead()", 1000);
    }
</script>
<body>
<div id="mainbody">
    <p style="display: none" id="space">&nbsp;</p>
</div>
<script>
    init();
    keepRead();
    keepMove();
</script>
</body>
</html>